import React, { useState } from 'react'
import { Navigate, Link, Outlet, useNavigate, useOutlet, useResolvedPath } from 'react-router-dom'

export default function Home() {
    const [sum, addSum] = useState(1)

    console.log("useOutLet >>> ", useOutlet())

    // 路径解析
    console.log("useResolvedPath >>> ", useResolvedPath('/user?id=1&name=阅阅'))

    // 通过该hook进行路由跳转
    const navigate = useNavigate()
    // console.log("navigate >>> ", navigate)

    /**
     * navigate 调用 第一个参数表示跳转地址，第二个参数表示相对应的配置（是否覆盖或者推入） 以及传递的state参数
    */
    function gotoAbout() {
        console.log("goto about")
        navigate("/about", {
            replace: false,
            state: { id: 1, name: 'diao' }
        })
    }
    return (
        <div>
            <h3>Home</h3>
            {sum === 3 ? <Navigate to="/about" replace /> : <h5>SUM = {sum}</h5>}
            <button onClick={() => { addSum(sum + 1) }}>sum+1</button>
            <br />
            <Link className="" to="/home/news">
                News
            </Link>
            <Link className="" to="/home/message">
                Message
            </Link>
            <br></br>
            <button onClick={gotoAbout}>GotoAbout</button>
            {/* 使用outlet用来指定嵌套路由展示的位置 */}
            <Outlet></Outlet>
        </div>
    )
}
